<template>
	<view class="u-p-t-30">
		<!-- {{list}} -->
		<view class="tiBox mdx-center-sm">
			<swiper style="height: 100%;" :current='current' @change="currentChange">
				<swiper-item style="height: 100%;" v-for="(item,index) in kaList" :key='index'>
					<view style="height: 100%;">
						<view>
						</view>
						<view class="top_com">
							选择题（本题{{parseInt(100/list.length)}}分，共100分）
						</view>
						<view class="u-m-t-20 tmTitle">
							{{index+1}}. {{item.title||''}}{{item.type==2?'(多选)':item.type==3?'(判断)':'(单选)'}}
						</view>
						<view v-if="item.type!=3">
							<view class="selectbox" @click="selectItem(item,'A',index)">
								<view class="left" :class="seletIndoeFind(item,'A')?'activeSelect':''">
									A
								</view>
								<view class="right u-flex-1 u-m-l-20">
									{{item.selectA}}
								</view>
							</view>
							<view class="selectbox" @click="selectItem(item,'B',index)">
								<view class="left" :class="seletIndoeFind(item,'B')?'activeSelect':''">
									B
								</view>
								<view class="right u-flex-1 u-m-l-20">
									{{item.selectB}}
								</view>
							</view>
							<view class="selectbox" @click="selectItem(item,'C',index)">
								<view class="left" :class="seletIndoeFind(item,'C')?'activeSelect':''">
									C
								</view>
								<view class="right u-flex-1 u-m-l-20">
									{{item.selectC}}
								</view>
							</view>
							<view class="selectbox" @click="selectItem(item,'D',index)">
								<view class="left" :class="seletIndoeFind(item,'D')?'activeSelect':''">
									D
								</view>
								<view class="right u-flex-1 u-m-l-20">
									{{item.selectD}}
								</view>
							</view>
						</view>
						<!-- {{item.selectText}} -->
						<view class="mdx-center-sm u-m-t-50 u-flex u-row-around" v-else>
							<u-icon :name="item.selectText=='true'?'/static/images/yes1.png':'/static/images/yes.png'"
								size="100" @click="selectItem(item,'true',index)"></u-icon>
							<u-icon
								:name="item.selectText=='false'?'/static/images/wrong1.png':'/static/images/wrong.png'"
								size="100" @click="selectItem(item,'false',index)"></u-icon>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="mdx-center-sm u-flex u-flex-wrap">
			<view class="dianBox" v-for="(item,index) in kaList" :key='index'
				@click="currentChange({detail:{current:index}})">
				<view>{{(index+1)}}</view>
				<view class="dioan u-m-t-10" :class="kaList[index].selectText!=''?'selectDian':''"></view>
			</view>

		</view>
		<view class="mdx-center-sm u-m-t-50 u-flex u-row-between">
			<u-icon name="/static/images/tmLeft.png" size="100" @click="nextAndup('up')"></u-icon>
			<u-icon name="/static/images/tmRight.png" size="100" @click="nextAndup('down')"></u-icon>
		</view>
		<view class="suspen mdx-center-xs">
			<u-button :custom-style="customStyle" :hair-line='false' @click="subiumt">确认提交</u-button>
		</view>
		<u-popup v-model="show1" mode='center'>
			<view class="popup_box">
				<view class="titleOne">确认交卷吗？</view>
				<view class="titleTwo">
					您还有{{num}}道题没有完成</view>
				<view class="u-flex btmn_box">
					<view class="btn_none u-flex-1" @click="confirmSubimt">确认交卷</view>
					<view class="btn_zt u-flex-1" @click="lookListIndex">查看详情</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show2" mode='center'>
			<view class="popup_box">
				<u-gap height="50"></u-gap>
				<view class="titleTwo">
					您是否确认交卷？</view>
				<u-gap height="50"></u-gap>
				<view class="u-flex btmn_box">
					<view class="btn_none u-flex-1" @click="show2=false">取消提交</view>
					<view class="btn_zt u-flex-1" @click="confirmSubimt">确认提交</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "wzk-examine",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			// type:{
			// 	type:Number,
			// 	default:1
			// }
		},
		data() {
			return {
				show1: false,
				show2: false,
				//下表
				current: 0,
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					background: '#00A29A'
				},

				num: 0,
				nowNum: 0,
				// list:[{
				// 	if:121,
				// 	xtext
				// 	boll:
				// }]
				// ctId:'115,124'
				//题目列表
				// list: [{
				// 		type: 3,
				// 		title: '蔬菜品类为了减少排队，不必要做精包装和简包装商品',
				// 		selectA: '',
				// 		selectB: '',
				// 		selectC: '',
				// 		selectD: '',
				// 		confirmSelect: 'false',
				// 		selectText: 'false'
				// 	}, {
				// 		type: 1, //类型 1 单选 ，2  多选，3 判断
				// 		title: '价格管理中的尾数定价原则多用哪些数字？', //题目标题
				// 		selectA: '0、5、8、9', //A选项
				// 		selectB: '1、2、3、4', //B选项
				// 		selectC: '1、2、5、6', //C选项
				// 		selectD: '3、4、8、0', //D选项
				// 		confirmSelect: 'A', //正确答案
				// 		selectText: '' //选择答案
				// 	},
				// 	{
				// 		type: 1,
				// 		title: '换季商品管理重点体现在哪些季节？',
				// 		selectA: '春、夏季',
				// 		selectB: '春、秋季',
				// 		selectC: '春、冬季',
				// 		selectD: '秋、冬季',
				// 		confirmSelect: 'A',
				// 		selectText: ''
				// 	}, {
				// 		type: 1,
				// 		title: '生鲜定价应遵循的原则',
				// 		selectA: '天价',
				// 		selectB: '低价',
				// 		selectC: '正常价格',
				// 		selectD: '坚持天天平价为基础，根据商品属性和市调结果调整价格，结构性商品可以适当调整毛利率但是要有度。',
				// 		confirmSelect: 'D',
				// 		selectText: ''
				// 	},
				// 	{
				// 		type: 2,
				// 		title: '如何安全的使用电子邮件',
				// 		selectA: '利用社交网站的安全与隐私设置保护敏感信息',
				// 		selectB: '不要轻易点击未经核实的链接',
				// 		selectC: '在社交网站谨慎发布个人信息',
				// 		selectD: '随意的浏览不明的链接',
				// 		confirmSelect: 'ABD',
				// 		selectText: ''
				// 	},

				// ]
				kaList: []
			};
		},
		computed: {
			// kaList(){
			// 	return this.list
			// }
		},
		methods: {
			//滑动监听
			currentChange(e) {
				this.current = e.detail.current
			},
			//上一题和下一题
			nextAndup(type) {
				if (this.current == this.list.length - 1 && type != 'up') {
					return
				}
				if (type == 'up') this.current--;
				else this.current++;

				console.log(this.current);
			},
			//此处是选择
			selectItem(item, select, index) {
				if (item.type == 2) {
					let text = item.selectText
					if (text.indexOf(select) < 0) {
						text += select
						let snum = text.split('');
						// console.log();
						text = (snum.sort(function(a, b) {
							return a.localeCompare(b)
						})).join('');
						console.log(text);
					} else {
						text = text.replace(select, '')
					}
					this.kaList[index].selectText = text
				} else {
					this.kaList[index].selectText = select
				}
				console.log(this.kaList);
			},
			subiumt() {
				let num = 0;
				let nowNum = -1;
				this.kaList.forEach((e, index) => {
					if (!e.selectText) {
						num++
						if (nowNum < 0) {
							console.log('index' + index);
							nowNum = index
						}
					}
				})
				this.nowNum = nowNum
				let comtent = ''
				this.num = num
				if (num > 0) {
					// comtent = ''
					this.show1 = true
				} else {
					this.show2 = true
				}
				console.log(num);
			},
			confirmSubimt() {
				this.$emit('confirmSubimt', this.kaList)
			},
			lookListIndex() {
				console.log(this.nowNum);
				this.current = this.nowNum
				this.show1 = false
			},
			//判断是否选中
			seletIndoeFind(item, select) {
				let index = item.selectText.indexOf(select)
				if (index != -1) {
					return true
				} else {
					return false
				}
			}
		},
		watch: {
			list(value) {
				console.log(value);
				this.kaList = JSON.parse(JSON.stringify(value))
			}

		}
	}
</script>

<style lang="scss">
	.dianBox {
		text-align: center;
		width: 67rpx;
		display: fle;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.dioan {
			margin: auto;
			width: 25rpx;
			height: 25rpx;
			background-color: #C4C4C4;
			border-radius: 50%;
		}

		.selectDian {
			background-color: #00A29A !important;
		}

	}


	.tiBox {
		padding: 20rpx;
		box-shadow: 0 0 10rpx #ddd;
		border-radius: 10rpx;
		height: 800rpx;
	}

	.top_com {
		font-size: 28rpx;
		color: #888;
	}

	.tmTitle {
		font-size: 32rpx;
		color: #222;
		font-weight: 500;
	}

	.selectbox {
		display: flex;
		align-items: center;
		margin-top: 30rpx;

		.left {
			margin-left: 10rpx;
			border: 1rpx solid #999;
			width: 45rpx;
			height: 45rpx;
			text-align: center;
			line-height: 44rpx;
			border-radius: 50%;

		}

		.activeSelect {
			line-height: 44rpx;
			background-color: #00A29A;
			border: 1rpx solid #00A29A;
			color: #fff;
		}

	}

	.popup_box {
		width: 560rpx;
		font-size: 32rpx;
		text-align: center;
	}

	.titleOne {
		margin-top: 80rpx;
		font-weight: 450;

	}

	.btmn_box {
		border-top: 1rpx solid #eee;
	}

	.titleTwo {
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}

	.btn_none {
		height: 90rpx;
		line-height: 90rpx;
		border-right: 1rpx solid #eee;

	}

	.btn_zt {
		height: 90rpx;
		line-height: 90rpx;
		background-color: #00A29A;
		color: #fff;
		border-radius: 0 0 10rpx 0;
	}
</style>
